<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dome</title>
</head>
<body>
<div id="app">
    <h5splay :token="'a36f05f4-0ba6-48c6-babd-238dac51a8f2'"></h5splay>
    <h5splay :token="'token2'"></h5splay>
</div>
</body>
</html>
<script src="https://cdn.makalu.cc/js/vue/vue.js"></script>
<script src="https://cdn.bootcss.com/platform/1.3.5/platform.js"></script>
<script src="https://cdn.makalu.cc/js/h5splayer/h5splayer.js"></script>
<script src="https://cdn.makalu.cc/js/h5splayer/h5splayerhelper.js"></script>
<script>

    Vue.component("h5splay", {
        template: `
          <video class="h5video" :id="uuid" @click="play" autoplay webkit-playsinline playsinline></video>
        `,
        props: {
            token: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                h5s: "",
                isplay: true,
                uuid: ""
            }
        },
        methods: {
            init() {
                let conf = {
                    videoid: this.uuid,
                    protocol: "http:",
                    host: "47.106.234.91:8080",
                    rootpath: '/',
                    token: this.token,
                    hlsver: 'v1',
                    session: 'c1782caf-b670-42d8-ba90-2244d0b0ee83'
                }
                document.getElementById(this.uuid).setAttribute("autoplay","autoplay")
                this.h5s = H5sPlayerCreate(conf)
                this.h5s.connect()
            },
            play() {
                if (this.isplay) {
                    this.h5s.disconnect()
                } else {
                    this.h5s.connect();
                }
                this.isplay = !this.isplay
            },
            guid() {
                function S4() {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                }

                return (S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
            }
        },
        mounted() {
            this.uuid = this.guid()
            setTimeout(this.init, 200)
        }
    })

    const app = new Vue({
        el: "#app",
        data() {
            return {}
        },
        methods: {},
        mounted() {
        }
    })
</script>
